import { getSize, getUserTypeValue } from "@/command/apiTool";
import Banner from "@/components/Banner";
import ButtonGroupView from "@/components/ButtonGroupView";
import { IButtonGroupViewData } from "@/components/ButtonGroupView/types";
import CardView from "@/components/CardView";
import DetailedInfo from "@/components/DetailedInfo";
import InfoCell from "@/components/InfoCell";
import { ILabelProps } from "@/components/Label/types";
import PageTitle from "@/components/PageTitle";
import RowView from "@/components/RowView";
import { defineComponent, reactive, ref } from "vue";
import { useRequest } from "./request";
import { Divider } from "vant";
import RoundInfo from "@/components/RoundInfo";
import ColView from "@/components/ColView";
import TextView from "@/components/TextView";
import ListView from "@/components/ListView";
import { useRouter } from "vue-router";
import * as vant from "vant";
const { showFailToast, showSuccessToast } = vant;

export default defineComponent({
  setup() {
    const { teamInfo, listByLarge } = useRequest();
    console.log(teamInfo);
    const router = useRouter();
    const getData1 = () => {
      const infoData = teamInfo.value;
      return {
        ...infoData,
        labels: [
          // {
          //     name: "品牌",
          //     type: "yellow",
          // },
        ] as ILabelProps[],
        types: [
          // {
          //   name: "水果、蔬菜类别可使用",
          //   type: "blue",
          // },
        ] as ILabelProps[],
        text: infoData.entityComment,
        desc: infoData.address,
        title: infoData.entityName,
        entityLogo: infoData.entityLogo,
        distance: infoData.jl,
      };
    };
    const getData2 = () => {
      let dataListByLarge = listByLarge.value;
      console.log("大户使用农资", dataListByLarge);

      return dataListByLarge;
    };

    const render1 = () => {
      const data = getData1();
      return (
        <CardView class={["!px-0 py-0"]}>
          <img class="w-full h-[206px]" src={data.entityLogo} />
          <DetailedInfo
            {...data}
            distance={data.distance}
            text={data.text}
            class={"!rounded-[0px]"}
          />
        </CardView>
      );
    };
    const render2 = () => {
      return (
        <CardView
          radius={0}
          title="农资百科"
          right={() => (
            <div
              class="blue-text"
              onClick={() => router.push("/farmProductEncyclopedia")}
            >
              查看
            </div>
          )}
        ></CardView>
      );
    };

    const renderItem = (e: any) => {
      const bottomLabel = () => {
        return (
          <ColView class={"max-w-[200px]"}>
            <TextView class={" text-gray-400 h-[50px]"}>{e.text}</TextView>
          </ColView>
        );
      };
      return (
        <div
          class="w-full"
          onClick={() => router.push(`/farmProductDetailXh?id=${e.id}`)}
        >
          <RowView class="justify-between w-full">
            <RoundInfo
              src={e.src}
              title={e.title}
              class="roundinfo-expert"
              v-slots={{ bottomLabel }}
            />
            <ColView class="items-center justify-center">
              <img
                src={"https://qfile.nongqibang.com/47141%402x.png"}
                class="!w-[44px] !h-[44px]"
                onClick={(ele) => {
                  ele.stopPropagation();
                  ele.preventDefault();
                  router.push(
                    `behalfBuyApplication?id=${teamInfo.value.id}&productionId=${e.id}`
                  );
                }}
              />
            </ColView>
          </RowView>
        </div>
      );
    };
    const render3 = () => {
      const data = getData2();
      let newData: unknown[] | undefined = [];
      newData = data.map((e: any) => {
        return {
          title: e.name,
          src: e.path,
          text: e.content,
          id: e.id,
        };
      });

      return (
        <CardView
          radius={0}
          title="使用农资"
          right={() => (
            <div
              class="blue-text"
              onClick={() =>
                router.push(`/farmProductsUseDh?id=${teamInfo.value.id}`)
              }
            >
              查看更多
            </div>
          )}
        >
          <ListView
            type="custom"
            data={newData}
            renderItem={renderItem}
            itemHeight={105}
            themeStyle="list-bottom-border"
          />
        </CardView>
      );
    };
    const render4 = () => {
      const buttons: IButtonGroupViewData[] = [
        {
          text: "咨询大户",
          type: "default",
          plain: true,
          childClass: "!h-[40px]",
          style: {
            width: getSize(165),
            background: "#FFFFFF",
            border: "1px solid #E6E6E6",
            borderRadius: getSize(25),
            height: getSize(40),
            color: "#333333",
          },
          toChatData: {
            to: teamInfo.value.phone,
            name: teamInfo.value.entityName,
          },
        },
        {
          text: "申请代购",
          type: "primary",
          childClass: "!h-[40px]",
          style: {
            width: getSize(165),
          },
          onClick: () => {
            router.push(`/behalfBuyApplication?id=${teamInfo.value.id}`);
          },
        },
      ];
      return (
        <div
          class="fixed left-0 right-0 bottom-0 h-[61px] flex items-center justify-center bg-white px-[10px] z-50"
          style={{
            boxShadow: "0px -3px 12px 1px rgba(0,0,0,0.1);",
            borderTop: "1px solid #f5f5f5",
          }}
        >
          <ButtonGroupView data={buttons} />
        </div>
      );
    };

    return () => {
      return (
        <PageTitle
          title={"大户详情"}
          childClass="!p-[0px] m-child-top-10 !pb-[50px]"
        >
          {render1()}
          {render2()}
          {render3()}
          {render4()}
        </PageTitle>
      );
    };
  },
});
